<template>
    <div>
        <div style="padding: 0 15px; display: flex;justify-content: space-between;margin: 15px 0;">
    		<div style="width: 32%;border-radius: 10px;background: rgba(84, 108, 127, 0.2);">
    			<div style=" display: flex; justify-content: space-between; position: relative;">
    				<div style="position: absolute; left: 10px; top: 15px; color: #fff;">
    					<div style="font-size: 13px;text-align: left;color: #BDBDBD;">Points</div>
    					<div style="font-size: 14px;display: flex;font-weight: 700; align-items: center; color: #C1E3FF;	 margin-top: 8px;text-align: left;">
                        	<img style="width: 15px;height: 15px; margin-right: 5px;" src="../static/img/bi.png" />
							{{ addCommas(user.points)  || 0}}
						</div>
    				</div>
    				<div style="position: absolute;right: 10px; top:15px">
    					<img style="width: 14px;height: 14px;" src="../static/img/info-circle.png" />
    				</div>
    			</div>
    		</div>
			<div style="width: 42%;border-radius: 10px;background: rgba(84, 108, 127, 0.2);">
	    			<div style=" display: flex; justify-content: space-between; position: relative;">
	    				<div style="position: absolute; left: 10px; top: 15px; color: #fff;">
	    					<div style="font-size: 13px;text-align: left;color: #BDBDBD;">Lives</div>
	    					<div style="font-size: 14px;display: flex; align-items: center; color: #C1E3FF;	 margin-top: 8px;text-align: left;">
	                        	
								<img  v-for="(item,index) in user.hp" :key="index" style="width: 14px;height: 14px;margin-right: 2px;" src="../static/img/heart5.png" />
	                        	<img v-if="user.hp < 8" v-for="(item, index) in  8-user.hp" :key="index" style="width: 14px;height: 14px;margin-right: 2px;" src="../static/img/heart4.png" />

							</div>
	    				</div>
	    				<div style="position: absolute;right: 10px; top:15px;color: #fff;font-size: 11px;">
	    					<label v-if="user.hp<8">{{ countdown }}</label>
	    				</div>
	    			</div>
	    		</div>
    		<div style="height:67px;width: 22%;border-radius: 10px;background: rgba(84, 108, 127, 0.2);;" @click="walletListHandel">
    			<div style="padding: 15px; display: flex; position: relative; justify-content: space-between;">
    				<div style="position: absolute; left: 10px; top: 15px; color: #fff;">
    					<div style="font-size: 13px;color: #BDBDBD;">Bonus</div>
    					<div style="font-size: 14px;font-weight: bold; color: #C1E3FF;margin-top: 8px;text-align: left;display: flex;align-items: center;">
	                        	<img style="width: 20px;height: 20px;margin-right: 5px;" src="../static/img/heart5.png" />
							
							{{ addCommas(share.peopleNumber) }}
						</div>
    				</div>
    				<div style="position: absolute;right: 10px; top:15px">
    					<img style="width: 14px;height: 14px;" src="../static/img/info-circle.png" />
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
</template>

<script>
export default {
    props: {
        user: {
            type: [Object, String],
            default:() => {}
        },
        countdown: {
			type: String,
			default:''
		},
		share: {
			type: [Object, String],
			default: () => { }
		},
    },
    data() {
        return {
			
		}
	},

	
	methods: {
		
		addCommas(number) {
			return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
		},
	}
}
</script>

<style lang="scss" scoped>

</style>